import React, { useEffect, useState } from 'react';
//引入antd 分页
import { Pagination } from "antd";
// 包裹组件
import { observer } from 'mobx-react-lite';
import './msgcommentlist.less';
// 引入useStore
import useStore from '@/context/useStore';
//引入时间戳
import { timeAgo } from "../util/getTime"
//引入评论组件
// import Comment from "./comment"
// 引入for-editor
import Editor from 'for-editor'
//点击回复留言板样式
import styles from './comment.less';
const msgcommentlist: React.FC = () => {
  const toolbar = {};
    // 样式
    const style = {
      width: '730px',
      height: '140px',
      borderRadius: '2px',
      boxShadow: 'none',
      verticalAlign: 'bottom',
    };
  // 解构useStore
  let { aboutID, aboutList } = useStore();
//   console.log(msgcommentlist.getcommentList);
  //请求接口  
  //回复
  const [Index, setIndex] = useState(-1);
  //绑定点击事件(回复)
  function reply(index: number) {
    setIndex(index);
  }
  //分页
  useEffect(() => {
    // 获取关于留言列表
    aboutList.getaboutList(aboutID.aboutId.id, 1)
  }, [aboutID.aboutId.id])
  // 点击页码切换
  function onPageChange(page: number) {
    aboutList.getaboutList(aboutID.aboutId.id,page)
  }

  return (
    <div className="host">
      <ul>
        {aboutList.aboutList.map((item, index) => (
          <li key={item.id}>
            <div className="main">
              <span>{item.name.split('')[0]}</span>
              <p >{item.name}</p>
            </div>
            <div className='h3'
              dangerouslySetInnerHTML={{ __html: item.html || item.content }}
            ></div>
            <div className="times">
              <span>{item.userAgent}</span>
              <span>{timeAgo(+new Date(item.createAt))}前</span>
              <span onClick={()=>{
                reply(index)
              }}>
                <i className="iconfont icon-xinxi"></i> 回复
            </span>
            </div>
            {item.children.length > 0
              ? item.children.map((item) => (
                <div key={item.id} className='mains'>
                  <div className="timess">
                    <span>{item.name.split('')[0]}</span>
                    <p>{item.name}</p>
                    回复
                    <b>{item.replyUserName}</b>
                  </div>
                  <div className='dd'
                    dangerouslySetInnerHTML={{
                      __html: item.html || item.content,
                    }}
                  ></div>
                  <div className="times">
                    <span>{item.userAgent}</span>
                    <span>{timeAgo(+new Date(item.createAt))}前</span>
                    <span>
                      <i className="iconfont icon-xinxi " > </i> 回复
                    </span>
                  </div>
                </div>
              ))
              : ''}

            <div>{index === Index ?  <div className={styles.text}>
        <Editor
          lineNum={false}
          toolbar={toolbar}
          placeholder="请输入评论内容（可输入 Markerdown 语法内容）"
          tab
          style={style} 
        ></Editor>
        <div className={styles.input}>
          <input type="text" placeholder="请输入您的称呼" className={styles.input_left} />
          <input
            type="text"
            placeholder="请输入您的邮箱（不会公开，您也可以选择不输入）" className={styles.input_right}
          />
        </div>

        <div className={styles.but}>
          <button >收起</button>
          <button >评论</button>
        </div>
      </div> : ''}
            </div>
          
          </li>
        ))}
      </ul>
      <div><Pagination pageSize={6} total={aboutList.total} onChange={onPageChange} /></div>

    </div>

  );
};
export default observer(msgcommentlist);
